<template>
    <div style=" background-color: aliceblue;">
        <!-- 导航 -->
        <div>
            <van-nav-bar title="暴走电商" />
        </div>
        <!-- 搜索 -->
        <div>
            <Search></Search>
        </div>
        <!-- 轮播 -->
            <Swioper></Swioper>
        <!-- 宫格 -->
            <Gongge></Gongge>
        <!-- 新品 -->
            <Xinpin></Xinpin>
        <!-- 直播间 -->
        <div style="width: 100%;height: 200px; background-color: #fff; border-radius: 15px; margin-bottom: 20px;">
            <p><span><img src="../img/11-11.gif" alt=""
                        style="margin-left: 20px;margin-top: 20px; margin-right: 5px;"></span><b>直播间</b><span
                    style="color: rgba(143, 143, 143, 0.675);float: right;margin-right: 20px; margin-top: 22px;font-size: 13px;">更多></span>
            </p>
            <div style="float: left; margin-left: 10px;"><img src="../img/11-12.gif" alt=""
                    style="width: 90px; height: 110px;"></div>
            <div style="float: left; margin-left: 10px;"><img src="../img/11-13.gif" alt=""
                    style="width: 90px; height: 110px;"></div>
            <div style="float: left; margin-left: 10px;"><img src="../img/11-14.gif" alt=""
                    style="width: 90px; height: 110px;"></div>
            <div style="float: left; margin-left: 10px;"><img src="../img/11-15.gif" alt=""
                    style="width: 90px; height: 110px;"></div>
        </div>
        <!-- 限时秒杀 -->
        <div style=" width: 100%; height: 225px; border-radius: 15px;">
            <div
                style="background-color: #fff; width: 45%; height: 200px; float: left; margin: 10px; border-radius: 15px; position: relative;">
                <p><span><img src="../img/11-16.gif" alt=""
                            style="margin-left: 20px;margin-top: 10px; margin-right: 5px;"></span><b>限时秒杀</b></p>
                <img src="../img/11-19.gif" alt="" style="width: 70px; height: 70px;margin: 10px;">
                <span
                    style=" position: absolute; bottom: 10px; left: 5px; display: inline-block;width: 80px; height: 25px; background-color: rgba(237, 171, 174, 0.61); color: red; border-radius:15px;line-height: 25px; padding-left: 10px;"><i><b>$3.2</b></i>
                </span>
                <span
                    style=" position: absolute; bottom: 6px; left: 60px; display: inline-block;width: 35px; height: 35px; background-color: rgba(255, 0, 0, 0.761); color: #fff; border-radius:50%;text-align: center;line-height: 35px;"><i><b>抢</b></i></span>
                <img src="../img/11-20.gif" alt="" style="width: 70px; height: 70px;margin: 10px;">
                <span
                    style=" position: absolute; bottom: 10px; left: 95px; display: inline-block;width: 80px; height: 25px; background-color: rgba(237, 171, 174, 0.61); color: red; border-radius:15px;line-height: 25px; padding-left: 10px;"><i><b>$432</b></i>
                </span>
                <span
                    style=" position: absolute; bottom: 6px; left: 150px; display: inline-block;width: 35px; height: 35px; background-color: rgba(255, 0, 0, 0.761); color: #fff; border-radius:50%;text-align: center;line-height: 35px;"><i><b>抢</b></i></span>
            </div>
            <div
                style="background-color: #fff; width: 45%; height: 200px; float: left; margin: 10px; border-radius: 15px;">
                <img src="../img/11-17.gif" alt="" style="margin: 10px; width: 70px; height: 70px;">
                <img src="../img/11-18.gif" alt="" style="margin: 10px; width: 70px; height: 70px;">
                <img src="../img/11-21.gif" alt="" style="margin: 10px; width: 70px; height: 70px;">
                <img src="../img/11-22.gif" alt="" style="margin: 10px; width: 70px; height: 70px;">
            </div>
        </div>
        <div>
            <van-tabs v-model:active="active">
                <van-tab title="推荐">
                    <!-- 瀑布流 -->
                    <div style="width: 100%; height: 2000px; column-count: 2; column-gap: 20px; ">

                        <div
                            style="width: 100%;height: 270px; display: inline-block; background-color: #fff; margin: 10px; border-radius: 15px;">
                            <img src="../img/11-24.gif" alt="" style="width: 100%;height: 120px;">
                            <p style="text-align: center; line-height: 30px;">耐克 (NIKE) MZK Tekno减震舒适厚麻低帮复古还⋯</p>
                            <p><span
                                    style="font-size: 23px;margin-left: 10px;margin-right: 10px;"><i><b>$1549</b></i></span><span
                                    style="font-size: 13px;"><b>卷前价$2099</b></span></p>
                        </div>
                        <div
                            style="width: 100%;height: 420px; display: inline-block; background-color: #fff; margin: 10px; border-radius: 15px;">
                            <img src="../img/11-25.gif" alt="" style="width: 100%;height: 280px;">
                            <p style="text-align: center; line-height: 30px;">深远深远T90三代动力版新国标电动自行车锂电池</p>
                            <p><span
                                    style="font-size: 23px;margin-left: 10px;margin-right: 10px;"><i><b>$4296</b></i></span><span
                                    style="font-size: 13px;"><b>卷前价$3849</b></span></p>
                        </div>
                        <div
                            style="width: 100%;height: 130px; display: inline-block; background-color: gold; margin: 10px;">
                        </div>
                        <div
                            style="width: 100%;height: 250px; display: inline-block; background-color: gold; margin: 10px;">
                        </div>
                        <div
                            style="width: 100%;height: 300px; display: inline-block; background-color: gold; margin: 10px;">
                        </div>
                        <div
                            style="width: 100%;height: 280px; display: inline-block; background-color: #fff; margin: 10px; border-radius: 15px;">
                            <img src="../img/11-23.gif" alt="" style="width: 100%;height: 140px; ">
                            <p style="text-align: center; line-height: 30px;">合电(TECLAST)DDR318GB台式机极速...</p>
                            <p><span
                                    style="font-size: 23px;margin-left: 10px;margin-right: 10px;"><i><b>$79</b></i></span><span
                                    style="font-size: 13px;"><b>卷前价$199</b></span></p>
                        </div>
                        <div
                            style="width: 100%;height: 330px; display: inline-block; background-color: #fff; margin: 10px; border-radius: 15px;">
                            <img src="../img/11-26.gif" alt="" style="width: 100%;height: 190px;">
                            <p style="text-align: center; line-height: 30px;">耐克(NIKE)女鞋2024孝新敉运动鞋</p>
                            <p><span
                                    style="font-size: 23px;margin-left: 10px;margin-right: 10px;"><i><b>$718</b></i></span><span
                                    style="font-size: 13px;"><b>卷前价$999</b></span></p>
                        </div>
                        <div
                            style="width: 100%;height: 220px; display: inline-block; background-color: gold; margin: 10px;">
                        </div>
                        <div
                            style="width: 100%;height: 190px; display: inline-block; background-color: gold; margin: 10px;">
                        </div>
                        <div
                            style="width: 100%;height: 100px; display: inline-block; background-color: gold; margin: 10px;">
                        </div>
                    </div>
                </van-tab>
                <van-tab title="食品">
                    <div style="width: 100%; height: 1000px;"></div>
                </van-tab>
                <van-tab title="百货">
                    内容 3
                    <div style="width: 100%; height: 1000px;"></div>
                </van-tab>
                <van-tab title="日用">
                    内容 4
                    <div style="width: 100%; height: 1000px;"></div>
                </van-tab>
                <van-tab title="箱包">
                    内容 5
                    <div style="width: 100%; height: 1000px;"></div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup>
import Swioper from '@/components/swioper.vue';
import Search   from '@/components/search.vue'
import Gongge from '@/components/gongge.vue';
import Xinpin from '@/components/xinpin.vue';


</script>

<style lang="scss" scoped>
// div
// {
//     color:rgba(255, 0, 0, 0.761);
// }</style>